<template>
  <div class="ceshi">
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show"
      :before-close="handleClose">
      <template #header>
        <div class="hm-box-title">变价历史详情</div>
      </template>

      <div class="screen">
        <div :class="screenIndex == index ? 'screen_div_hover' : 'screen_div'" v-for="(item, index) in screenList"
          :key="index" @click="navClick(item.id, index)">
          {{ item.name }}
        </div>
      </div>

      <div class="hm-form-item-box1">
        <div class="hm-form-title" id="commodity_information" style=" position: relative; ">基本信息</div>

        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_div">
              <div class="title">商品名称：</div>{{
                commoditydetailsData.styleName
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">商品69码：</div>{{
                commoditydetailsData.styleCode
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">商品编码：</div>{{
                commoditydetailsData.productId
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">品牌：</div>{{
                commoditydetailsData.brandName
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">贸易方式：</div>{{
                commoditydetailsData.tradeMode
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">类目：</div>
              <div class="value">{{
                commoditydetailsData.productCategoryName
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">规格/材质：</div>
              <div class="value">{{
                commoditydetailsData.specs
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">对接群名：</div>
              <div class="value">{{
                commoditydetailsData.groupName
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">能否破价：</div>
              <div class="value">{{
                commoditydetailsData.discountPrice
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">历史最低售价：</div>
              <div class="value">{{
                commoditydetailsData.historyPrice
              }}</div>
            </div>
            <div class="mechanism_wrap">
              <div class="title">合同状态：</div>
              <div class="value">
                <div class="examine_item"
                  :style="{ backgroundColor: commoditydetailsData.hmSupplierVo?.sellStatus === '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.hmSupplierVo?.sellStatus === '1' ? '#19D11B' : '#FC2540' }">
                  供销合同<img
                    :src="commoditydetailsData.hmSupplierVo?.sellStatus === '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
                <div class="examine_item" v-if="!commoditydetailsData.type"
                  :style="{ backgroundColor: commoditydetailsData.hmSupplierVo?.discountStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.hmSupplierVo?.discountStatus == '1' ? '#19D11B' : '#FC2540' }">
                  破价合同<img
                    :src="commoditydetailsData.hmSupplierVo?.discountStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
                <div class="examine_item" v-if="commoditydetailsData.type"
                  :style="{ backgroundColor: commoditydetailsData.hmSupplierVo?.packageStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.hmSupplierVo?.packageStatus == '1' ? '#19D11B' : '#FC2540' }">
                  包销合同<img
                    :src="commoditydetailsData.hmSupplierVo?.packageStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
                <div class="examine_item"
                  :style="{ backgroundColor: commoditydetailsData.hmSupplierVo?.depositStatus === '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.hmSupplierVo?.depositStatus === '1' ? '#19D11B' : '#FC2540' }">
                  保证金协议<img
                    :src="commoditydetailsData.hmSupplierVo?.depositStatus === '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
                <div class="examine_item"
                  :style="{ backgroundColor: commoditydetailsData.hmSupplierVo?.supplementStatus === '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.hmSupplierVo?.supplementStatus === '1' ? '#19D11B' : '#FC2540' }">
                  补充协议<img
                    :src="commoditydetailsData.hmSupplierVo?.supplementStatus === '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
              </div>
            </div>
            <div class="mechanism_wrap">
              <div class="title">卖点：</div>
              <div class="value">{{
                commoditydetailsData.sellingPoints
              }}</div>
            </div>
            <div class="mechanism_img">
              <div class="title">商品图片：</div>
              <div class="value" v-if="commoditydetailsData.productImage">
                <div class="img_div" v-for="(item, index) in commoditydetailsData?.productImage?.split(',')"
                  :key="index">
                  <image-preview :src="item" :width="190" :height="130" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="hm-form-title" id="collaboration_information">合作信息</div>
        <el-row class="content_div_cooperationMode">
          <el-col :span="24">
            <el-descriptions :column="3">
              <el-descriptions-item :label="commoditydetailsData.type == '1' ? '研发部：' : '招商部：'">{{
                commoditydetailsData.recruiterDept
              }}</el-descriptions-item>
              <el-descriptions-item :label="commoditydetailsData.type == '1' ? '研发专部：' : '招商员：'">{{
                commoditydetailsData.recruiter
              }}</el-descriptions-item>
              <el-descriptions-item label="是否走仓：" v-if="commoditydetailsData.productCategoryName.indexOf('饰品') >= 0">{{
                commoditydetailsData.warehouse ? '是' : '否'
              }}</el-descriptions-item>
              <el-descriptions-item v-else></el-descriptions-item>
            </el-descriptions>
            <div class="hm-form-mechanism" v-for="(item, index) in commoditydetailsData.hmMechanismsList" :key="index">
              <div class="mechanism_title">机制{{ index + 1 }}：</div>
              <el-descriptions :column="3">
                <el-descriptions-item label="合作方式：">{{ item.cooperationMode
                  }}</el-descriptions-item>
                <el-descriptions-item label="售价：">{{ item.price
                  }}</el-descriptions-item>
                <el-descriptions-item label="佣金：">{{ item.commission ? item.commission + '%'
                  :
                  ''
                  }}</el-descriptions-item>
                <el-descriptions-item label="直播机制：">{{ item.liveStreamingMechanism
                  }}</el-descriptions-item>
                <el-descriptions-item label="成本价：">{{ item.costPrice
                  }}</el-descriptions-item>
                <el-descriptions-item label="补充佣金：">{{ item.brokerage ? item.brokerage + '%' : '-'
                  }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
        </el-row>

        <div class="hm-form-title" id="merchant_information">商家信息</div>
        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_div">
              <div class="title">供应商名称：</div>
              <div class="value">{{ commoditydetailsData.hmSupplierVo?.supplierName }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">商家类型：</div>
              <div class="value">{{ commoditydetailsData.hmSupplierVo?.supplierType }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">厂家地址：</div>
              <div class="value">{{ commoditydetailsData.hmSupplierVo?.addr }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">供应商联系人：</div>
              <div class="value">{{ commoditydetailsData.hmSupplierVo?.contactName }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">供应商联系电话：</div>
              <div class="value">{{ commoditydetailsData.hmSupplierVo?.phone }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">厂家详细地址：</div>
              <div class="value">{{ commoditydetailsData.hmSupplierVo?.address }}</div>
            </div>
          </div>
        </div>

        <div class="hm-form-title" id="supplement_message">直播补充信息</div>
        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_div">
              <div class="title">发货时间：</div>{{
                commoditydetailsData.deliveryTime
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">发货地：</div>{{
                commoditydetailsData.placeDelivery
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">物流/快递：</div>{{
                commoditydetailsData.logistics
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">适用人群：</div>{{
                commoditydetailsData.eligibility
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">厂家可用库存：</div>{{
                commoditydetailsData.factoryStockNum
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">不发货地区：</div>
              <div class="value">{{
                commoditydetailsData.noSendArea
              }}</div>
            </div>
            <div class="mechanism_div" v-if="commoditydetailsData.type == '1'">
              <div class="title">大货时间：</div>
              <div class="value">{{ commoditydetailsData.bigDate }}</div>
            </div>
            <div class="mechanism_div" v-if="commoditydetailsData.type == '1'">
              <div class="title">包销时限：</div>
              <div class="value">{{ commoditydetailsData.packageDeadline }}</div>
            </div>
            <div class="mechanism_div" v-if="commoditydetailsData.type == '1'">
              <div class="title">包销提醒：</div>
              <div class="value">{{ commoditydetailsData.isPackageRemind ? '开' : '关' }}</div>
            </div>
            <div class="mechanism_img" v-if="commoditydetailsData.type == '1'">
              <div class="title">无AB货截图：</div>
              <div class="value" v-if="commoditydetailsData.noAbImage">
                <div class="img_div" v-for="(item, index) in commoditydetailsData.noAbImage.split(',')" :key="index">
                  <image-preview :src="item" :width="190" :height="130" />
                </div>
              </div>
            </div>
            <div class="mechanism_img" v-if="commoditydetailsData.type == '1'">
              <div class="title">大货视频：</div>
              <div class="value" v-if="commoditydetailsData.bigVideo">
                <video controls :src="commoditydetailsData.bigVideos"></video>
              </div>
            </div>
          </div>
        </div>
        <el-row>
          <el-col :span="24" class="flex_div">
            <div class="label">
              <img src="@/assets/images/pdf.png" alt="">【{{ commoditydetailsData.styleName }}】信息卡 (A4) PDF
            </div>
            <div class="value">
              <span @click="preview(commoditydetailsData.productId)">预览</span>
              <span @click="handleExport(commoditydetailsData.productId)">下载</span>
            </div>
          </el-col>
        </el-row>

        <div class="hm-form-title" id="review_information">审批信息</div>
        <!-- <div class="switch">
                    <div :class="switchIndex !== index ? 'switch_div' : 'switch_div_avtive'"
                        v-for="(item, index) in switchList" :key="index" @click="switchIndex = index">
                        {{ item }}
                    </div>
                </div> -->
        <!-- 价格复核 -->
        <div class="pricing_information">
          <div class="findings_audit_content">
            <div class="column" v-for="(item, index) in logList" :key="index">
              <div class="circle" :style="{ 'background-color': index == 0 ? '#109AFF' : '' }"></div>
              <div v-if="index !== logList.length - 1" class="line"></div>
              <div class="column_top">
                <div class="adopt_proposal" :style="{ 'color': index == 0 ? '#109AFF' : '' }">{{
                  item.name
                }}
                </div>
                <div class="adopt_proposals" :style="{ 'color': index == 0 ? '#109AFF' : '' }">{{
                  item.des }}
                </div>
                <div class="danger_date">
                  {{ item.time }}
                </div>
              </div>
              <div class="conten" v-if="item.title">
                {{ item.title }}
              </div>
              <div class="content" v-if="!item.title">
                <div class="content_flex" v-for="(ite, ind) in item.hmChangeMechanismListTwo" :key="ite.mechanismId">
                  <div v-if="ite.cooperationMode" class="content_flex_child">
                    <div class="content_flex_is">
                      <div class="circles">原</div>
                      <div class="content_div">机制{{ ind + 1 + ':' }}</div>
                      <div class="content_div">
                        {{ ite.cooperationMode }}
                      </div>
                      <div class="content_div">
                        {{ ite.cooperationMode == '分佣' ? ite.price : ite.costPrice }}
                      </div>
                      <div class="content_div" v-if="ite.cooperationMode == '分佣'">
                        {{ ite.brokerage ? ite.brokerage + '%' : '-' }}
                      </div>
                      <div class="content_div">
                        {{ ite.liveStreamingMechanism }}
                      </div>
                      <div v-if="ite.commission">
                        {{ ite.commission + '%' }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content content1" v-if="!item.title">
                <div class="content_flex" v-for="(ite, ind) in item.changeMechanisms" :key="ite.mechanismId">
                  <div v-if="ite.cooperationMode" class="content_flex_child">
                    <div
                      :class="{ content_flex_is: true, content_flex_iss: ite.color !== 'red', content_flex_hong: ite.color === 'red' }">
                      <div class="circles">改</div>
                      <div class="content_div">机制{{ ind + 1 + ':' }}</div>
                      <div class="content_div">
                        {{ ite.cooperationMode }}
                      </div>
                      <div class="content_div">
                        {{ ite.cooperationMode == '分佣' ? ite.price : ite.costPrice }}
                      </div>
                      <div class="content_div" v-if="ite.cooperationMode == '分佣'">
                        {{ ite.brokerage ? ite.brokerage + '%' : '-' }}
                      </div>
                      <div class="content_div">
                        {{ ite.liveStreamingMechanism }}
                      </div>
                      <div v-if="ite.commission">
                        {{ ite.commission + '%' }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script setup name="commoditymodify" lang="ts">
import { exportCertId } from '@/api/group/investmentPromotion/index';
const icon_lvseduihao = new URL('@/assets/images/icon_lvseduihao.png', import.meta.url).href;
const icon_wenhaohongse = new URL('@/assets/images/icon_wenhaohongse1.png', import.meta.url).href;

const status = ref(1);
const auditRemark = ref();
const props = defineProps({
  commoditydetailsData: {
    type: Object,
    default: ''
  },
  dialogInfoVisible: {
    type: Boolean,
    default: false
  }
});
const screenList = ref([
  { name: '基本信息', id: '#commodity_information' },
  { name: '合作信息', id: '#collaboration_information' },
  { name: '商家信息', id: '#merchant_information' },
  { name: '直播补充信息', id: '#supplement_message' },
  { name: '审批信息', id: '#review_information' }
]);
const screenIndex = ref(0);
const navClick = (id: string, index: number) => {
  const info: any = document.querySelector(id);
  info.scrollIntoView({ behavior: 'smooth' });
  screenIndex.value = index;
};
const logList: any = computed(() => {
  props.commoditydetailsData?.hmChangeAuditLogVos?.forEach((item: any) => {
    item.title = auditStatusNameById(item.changeAuditStatus, item.pricingAuditRemark);
    item.name = handleName(item.changeAuditStatus, item.stockAuditStatus, item.requestUserName, item.pricingUserName, item.stockUserName);
    item.time =
      item.changeAuditStatus === 0
        ? item.requestTime
        : item.changeAuditStatus === 1 || (item.changeAuditStatus === 2 && item.stockAuditStatus !== 2)
          ? item.pricingAuditTime
          : item.stockAuditTime;
    item.des = handledes(item.changeAuditStatus, item.stockAuditStatus);
  });
  return props.commoditydetailsData?.hmChangeAuditLogVos?.reverse();
});
/** 处理不同状态回显的文字 */
const handledes = (auditStatus: number, stockAuditStatus: any) => {
  if (auditStatus === 0) {
    return '发起变价';
  }
  if (auditStatus === 1) {
    return '已驳回';
  }
  if (auditStatus === 2 && stockAuditStatus !== 2) {
    return '已通过';
  }
  if (auditStatus === 2 && stockAuditStatus === 2) {
    return '已接收';
  }
};
/** 处理不同状态回显的文字 */
const auditStatusNameById = (auditStatus: number, auditRemark: string) => {
  if (auditStatus == 0) {
    return '';
  } else if (auditStatus == 2) {
    return '';
  } else if (auditStatus == 1) {
    return auditRemark;
  }
};
/** 处理不同状态回显的名字 */
const handleName = (auditStatus: number, stockAuditStatus: any, auditor: string, pricingUserName: string, stockUserName: string) => {
  if (auditStatus === 0) {
    return '发起人：' + auditor;
  }
  if (auditStatus === 1 || auditStatus === 2) {
    if (stockAuditStatus === 2) {
      return '接收人：' + stockUserName;
    } else {
      return '审批人：' + pricingUserName;
    }
  }
};

/** 预览 */
const preview = async (id: string) => {
  const resp: any = await exportCertId(id);
  const blob = window.URL.createObjectURL(new Blob([resp], { type: 'application/pdf' }));
  window.open(blob);
};
/** 下载 */
const handleExport = async (id: string) => {
  const resp: any = await exportCertId(id);

  // 创建一个Blob对象，并传入响应数据
  const blob = new Blob([resp], { type: 'application/pdf' });

  // 创建一个指向该Blob对象的URL
  const url = window.URL.createObjectURL(blob);

  // 创建一个下载链接，并模拟点击它
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', `${props.commoditydetailsData.styleName}信息卡`); // 设置下载的文件名
  document.body.appendChild(link);
  link.click();

  // 从DOM中移除链接，并释放URL对象
  link.remove();
  window.URL.revokeObjectURL(url);
};
const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose']);
const handleClose = () => {
  auditRemark.value = '';
  status.value = 1;
  emits('doClose');
};
onMounted(() => { });
</script>
<style lang="scss" scoped>
.hm-form-title {
  font-size: 16px;
  font-weight: bold;
  color: #1a1b1c;
  margin-bottom: 10px;
}

.hm-drawer .el-drawer__header {
  margin-bottom: 0px !important;
}

.mb96 {
  margin-bottom: 10px;
}

:deep(.el-drawer__body) {
  overflow-x: hidden !important;
}

.hm-box-title {
  font-weight: 600;
  font-size: 21px;
  color: #1c1d1e;
  margin-bottom: 44px;
}

:deep(.el-drawer__body) {
  margin-top: 5px;
  padding-top: 0 !important;
}

:deep(.el-descriptions) {
  height: 100%;
}

.hm-form-item-box1 {
  overflow-y: auto;
}

.screen {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: fixed;
  z-index: 1;
  top: 50px;

  .screen_div {
    width: 106px;
    height: 44px;
    background: #ebf7ff;
    text-align: center;
    line-height: 44px;
    font-weight: 500;
    font-size: 14px;
    color: #0094ff;
  }

  .screen_div_hover {
    width: 106px;
    height: 44px;
    background: #0094ff;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 44px;
  }
}

.mechanism_flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;

  .mechanism_div {
    margin-bottom: 15px;
    width: calc(100% / 3);
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 130px;
    }

    .value {
      width: calc(100% - 130px);
      word-break: break-all;
    }
  }

  .mechanism_wrap {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 100px;
    }

    .value {
      width: calc(100% - 100px);
      display: flex;
      align-items: center;

      .examine_item {
        width: 85px;
        height: 22px;
        background: #e7fdee;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 12px;
        color: #19d11b;
        line-height: 22px;
        margin-right: 10px;

        img {
          width: 14px;
          height: 14px;
          margin-left: 5px;
        }
      }
    }
  }

  .mechanism_img {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;
    flex-wrap: wrap;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 100px;
    }

    .value {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 10px;

      .img_div {
        margin-right: 10px;
      }
    }

    video {
      width: 230px;
      height: 150px;
    }
  }
}

.flex_div {
  display: flex;
  margin-bottom: 10px;

  .label {
    min-width: 120px;
    font-size: 14px;
    background-color: rgba(240, 246, 255);
    padding: 4px 7px;

    img {
      width: 14px;
      height: 14px;
    }

    margin-right: 10px;
  }

  .value {
    color: #0094ff;
    font-weight: 400;
    font-size: 14px;
    line-height: 27px;
    cursor: pointer;

    span {
      margin-right: 30px;
    }
  }
}

:deep(.el-descriptions__body) {
  height: 100%;
}

:deep(.el-descriptions__table) {
  height: 100%;
}

.content_div_cooperationMode {
  :deep(.el-descriptions) {
    height: auto !important;
  }

  :deep(.el-descriptions__cell) {
    width: 30% !important;
  }

  .hm-form-mechanism {
    position: relative;

    .mechanism_title {
      font-weight: 500;
      font-size: 14px;
      color: #1a1b1c;
      margin-bottom: 15px;
    }

    .delete_mechanism {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 50%;
      cursor: pointer;
      z-index: 50;
    }
  }
}

.switch {
  width: 258px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #0094ff;
  margin: 20px 0;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #0094ff;

  .switch_div {
    width: 86px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }

  .switch_div_avtive {
    width: 86px;
    height: 30px;
    border-radius: 15px;
    background: #0094ff;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
  }
}

.pricing_information {
  // display: flex;
  // flex-wrap: wrap;

  .findings_audit_content {
    // height: 80px;
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 50px;

    .column {
      width: 100%;
      // display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;

      .conten {
        font-size: 14px;
        color: #afb6c3;
        position: absolute;
        top: 0px;
        left: 430px;
        margin-left: 10px;
      }

      .content {
        font-size: 14px;
        color: #afb6c3;
        position: absolute;
        top: 0;
        left: 430px;
        margin-left: 10px;
        transform: translateY(-50%);
        margin-top: 9px;
        width: 460px;

        .content_flex {
          .content_flex_child {
            height: 70px;
            background: #f6fcff;
            border-radius: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
          }

          .content_flex_is {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #0094ff;

            .circles {
              width: 22px;
              height: 22px;
              border: 1px solid #0094ff;
              text-align: center;
              border-radius: 50%;
              margin-right: 5px;
            }
          }

          .content_flex_iss {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #19d11b;

            .circles {
              width: 22px;
              height: 22px;
              border: 1px solid #19d11b;
              text-align: center;
              border-radius: 50%;
            }
          }

          .content_flex_hong {
            color: red;

            .circles {
              border: 1px solid red;
            }
          }

          .content_div {
            margin-right: 10px;
            line-height: 1;
          }
        }
      }

      .content1 {
        font-size: 14px;
        color: #afb6c3;
        position: absolute;
        top: 0;
        left: 900px;
        margin-left: 10px;
        transform: translateY(-50%);
      }

      .column_top {
        display: flex;
        height: 18px;
        margin-left: 10px;
        position: absolute;
        top: 0;
        left: 10px;
        align-items: center;
      }

      .circle {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        margin-bottom: 110px;
        margin-top: 3px;
        border: 1px solid #109aff;
      }

      .line {
        height: calc(100% - 11px);
        position: absolute;
        border-left: 1px solid #0094ff;
        top: 13px;
        left: 5px;
      }

      .adopt_proposal {
        font-size: 14px;
        line-height: 1.4;
      }

      .adopt_proposals {
        font-size: 14px;
        line-height: 1.4;
        margin-left: 10px;
      }

      .danger_name {
        font-size: 14px;
        color: #afb6c3;
        position: absolute;
        top: 20px;
        left: 10px;
        margin-left: 10px;
      }

      .danger_date {
        font-size: 14px;
        color: #b8beca;
        margin-left: 10px;
      }
    }
  }

  .pricing_proposal {
    .el-textarea {
      display: block;
      width: 340px;
      margin-top: 10px;
    }

    .label {
      display: flex;
      align-items: center;
      margin: 10px 0;

      .label_left {
        font-weight: 500;
        font-size: 14px;
        color: #1a1b1c;
      }

      .label_right {
        font-weight: 400;
        font-size: 14px;
        color: #afb6c3;
        margin-left: 20px;
      }
    }

    .value {
      width: 100%;
      display: flex;

      .img_div {
        margin-right: 10px;
      }

      :deep(.upload-file-uploader) {
        width: 300px;
      }
    }

    .abbreviation {
      width: 525px;
      // height: 115px;
      background: #f6fcff;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 15px;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .name {
          width: 128px;
          height: 30px;
          background: #0094ff;
          border-radius: 15px;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          line-height: 30px;
        }

        .times {
          font-weight: 400;
          font-size: 14px;
          color: #afb6c3;
        }
      }

      .content {
        font-weight: 400;
        font-size: 14px;
        color: #1a1b1c;
        margin-top: 15px;
      }
    }
  }
}
</style>